import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Dimensions, Platform, ToastAndroid, TouchableHighlight, Alert, DeviceEventEmitter } from 'react-native'
import { Container, Content, List, ListItem, Text, Body, Thumbnail, Spinner, Icon, Button, Toast, CheckBox } from 'native-base'
import Collapsible from 'react-native-collapsible';
import { connect } from 'react-redux';
import interaction from '../../net/interaction.js';
import URL from '../../net/url.js';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
class course_class_list extends Component {
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: -1,
            content: null,
            checkbox: [], //多选按钮是否选中存放值true或false
            checkbox_value: [], //多选按钮对应的value值，即所需要传送的数值
        }
    }
    render() {
        const { navigate } = this.props.navigation;
        if (!this.state.content) {
            return this.renderLoadingView();
        }
        else {
            return (
                <Container  >
                    <Content>
                        <ListItem itemDivider>
                            <Icon name='ios-paper-outline' />
                            <Body>
                                <Text >班级列表</Text>
                            </Body>
                        </ListItem>
                        {this.renderContent(this.state.content)}
                        <Button block light style={StyleSheet.flatten(styles.button_default)} onPress={() => {
                            let classList = '';
                            for (let i = 0; i < this.state.checkbox.length; i++) {
                                if (this.state.checkbox[i]) {
                                    if (i == this.state.checkbox.length - 1) {
                                        classList += this.state.checkbox_value[i];
                                    }
                                    else {
                                        classList += this.state.checkbox_value[i] + '-';
                                    }
                                }
                            }
                            console.log('classList');
                            console.log(classList);
                            //班级信息不能为空
                            if (classList != '') {
                                Alert.alert('课程：' + this.props.navigation.state.params.title, '班级列表：' + classList, [
                                    { text: '取消' },
                                    {
                                        text: '确定', onPress: () => {
                                            const { login_info } = this.props;
                                            const { course_info } = this.props;
                                            this.openCourse(login_info.userName, course_info.courseid, classList);
                                        }
                                    }
                                ])
                            }
                            else {
                                Alert.alert('温馨提醒:', '班级信息不能为空');
                            }

                        }} >
                            <Text style={{color:'#fff'}}>开启</Text>
                        </Button>
                    </Content>
                </Container>
            );

        }

    }
    //根据云课堂课程id获取班级列表
    async componentDidMount() {
        const { course_info } = this.props;
        let Interaction = new interaction();
        let ClassList = await Interaction.getClassList(course_info.courseid);
        if (ClassList == undefined) {
            this.setState({ content: 'noClassList' });
        }
        else { this.setState({ content: ClassList, }); }
    }
    //执行开启课程操作
    async openCourse(userName, courseid, classList) {
        let Interaction = new interaction();
        console.log('userName', userName)
        console.log('courseid', courseid)
        console.log('classList', classList)
        let openCourseResult = await Interaction.openCourse(userName, courseid, classList);
        console.log('开启课堂123', openCourseResult)
        if (openCourseResult) {
            DeviceEventEmitter.emit('classIconDidChange');
            //DeviceEventEmitter.emit('classStatus');
            Alert.alert('温馨提醒:', '成功开启课堂', [
                { text: '取消' },
                { text: '确定', onPress: () => {this.props.navigation.navigate('CourseInfo', { title: this.props.navigation.state.params.title }); } }
            ]);
        }
        else {
            Alert.alert('温馨提醒:', '开启课堂失败');
        }
    }
    //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    //加载下拉下单组件上
    renderContent(l) {
        if (l == 'noClassList') {
            return (
                <ListItem style={StyleSheet.flatten(styles.view)}>
                    <Text style={StyleSheet.flatten(styles.text_style)}>此课程暂无班级信息</Text>
                </ListItem>
            )
        }
        const { classCode } = this.props;
        return l.map((v, i) => {
            return (
                <View key={i} >
                    <List>
                        <ListItem button style={StyleSheet.flatten(styles.view)} onPress={() => {
                            let l = this.state.checkbox;
                            let value = this.state.checkbox_value;
                            l[i] = !l[i];
                            value[i] = v.title;
                            this.setState({ checkbox: l });
                            this.setState({ checkbox_value: value });
                        }}>
                            <Body >
                                <Text style={StyleSheet.flatten(styles.text_style)}>请选择：</Text>
                                {/*{console.log(v.chapterTitle)}*/}
                            </Body>
                            <CheckBox checked={this.state.checkbox[i]} />
                        </ListItem>
                        <ListItem button style={StyleSheet.flatten(styles.view)} onPress={() => { this.setState(this.state.selectedItem !=i ? { selectedItem: i } : { selectedItem: -1 }); }}>
                            <Body >
                                <Text style={StyleSheet.flatten(styles.text_style)}>{v.title}班</Text>
                                {/*{console.log(v.chapterTitle)}*/}
                            </Body>
                            <Thumbnail square size={20} style={StyleSheet.flatten(styles.nextIcon)} source={require('../../images/back.png')} />
                        </ListItem>
                    </List>
                    <Collapsible collapsed={this.state.selectedItem === i ? false : true}>
                        <ScrollView ref={(scrollView) => { _scrollView = scrollView; }} style={StyleSheet.flatten(styles.ScrollView)}>
                            <List style={StyleSheet.flatten(styles.List)}>
                                {v.content.map((v, j) => {
                                    return (
                                        <ListItem key={j} style={StyleSheet.flatten(styles.height)}>
                                            <Text style={StyleSheet.flatten(styles.text_style2)}>{v.name}</Text>
                                        </ListItem>
                                    );
                                })}
                            </List>
                        </ScrollView>
                    </Collapsible>
                </View>
            );
        })
    }
}
const styles = StyleSheet.create({
    button_default: {
        marginTop: 40,
        width: width / 4,
        height: 30,
        alignSelf: 'center',
        backgroundColor: '#F0AD4E',
    },
    view: {
        marginRight: 0,
        marginLeft: 0,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    ListItem: {
        paddingLeft: 20,
    },
    Container: {
        marginTop: 20,
    },

    List: {
        paddingLeft: 50,
        backgroundColor: 'white',

    },
    text_style: {
        //fontFamily:'微软雅黑',
        fontSize: 15,
        color: '#353535',
        paddingLeft: 15,
    },
    text_style2: {
        //fontFamily:'微软雅黑',
        fontSize: 14,
        color: '#353535',
        paddingLeft: 15,
    },
    nextIcon: {
        width: 20,
        height: 20,
        marginRight: 0,
        opacity: 0.6,
    },
    ScrollView: {
        height: 200,

    },
    height: {
        height: 40,

    },

});
function mapStateToProps(state) {
    return {
        login_info: state.login.login_info,
        course_info: state.course.course_info,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        classCode: (state) => dispatch(state)
    }
}
const CourseClassList = connect(
    mapStateToProps,
    mapDispatchToProps
)(course_class_list)

export default CourseClassList;
